/*
 * 产品类别列表
 * @Author: ljb
 * @Date: 2018-03-27 17:53:05
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-26 18:07:51
 */
<template>
	<Table
		:columns="columns"
		:loading="loading"
		:data="categories"
		:height="tableHeight()"
		class="category-index personal-scrollbar"
		border
		@on-sort-change="sortable"/>
</template>

<script>

import Button from 'iview/src/components/button';
// import Icon from 'iview/src/components/icon';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'AdminCategoryIndex',
	mixins: [computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		categories: {
			type: Array,
			default() {
				return false;
			},
		},
		goodsCategories: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('category.name'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},

				// {
				// 	title: this.$t('category.category_const'),
				// 	key: 'const',
				// 	align: 'center',
				// 	render: (h, { row }) => <div> { row.const || '-' } </div>,
				// },
				{
					title: this.$t('category.icon'),
					key: 'icon',
					align: 'center',
					render: (h, { row }) => <div>
						{
							row.icon
								? <img src={ row.icon } alt={this.$t('common.none')} width="50%"/>
								: this.$t('common.none')
						}
					</div>,
				},
				{
					title: this.$t('category.type'),
					key: 'has_asset',
					align: 'center',
					render: (h, { row }) => <div>
						{
							Number(row.has_asset) === 1
								? <span>{ this.$t('category.makeup') }</span>
								: <span>{ this.$t('category.skincare') }</span>
						}
					</div>,
				},
				{
					title: this.$t('category.priority'),
					key: 'priority',
					align: 'center',
					render: (h, { row }) => <div> { String(row.priority) || '-' } </div>,
				},
				{
					title: this.$t('common.created_at'),
					key: 'created_at',
					width: 200,
					align: 'center',
					// sortable: 'custom',
					render: (h, { row }) => <div> { !row.created_at ? '-' : row.created_at } </div>,
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 200,
					render: (h, { row }) => (
						<div>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
								{this.$t('common.edit')}
							</Button>
							<Button size="small" on-click={() => { this.$emit('delete', row.id); }} type="error">
								{this.$t('common.delete')}
							</Button>
						</div>),
				},
			],
		};
	},
	methods: {

		/**
         * 排序的回调
         * @param  {Object} param {对应列的属性对象,里面包含了column列属性，key值，order排序字段}
         * @return {undefined}
         */
		sortable(param) {
			const search_param = {
				order_by: param.key,

				sort: param.order === 'normal' ? '' : param.order,
			};

			this.$emit('sort', search_param);
		},

	},
};
</script>
